<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Caliga</title>
    <script type="text/javascript" src="../caliga.js" ></script>
    <script type="text/javascript" >
			var curNb = 1;
	
			function Init(canvas){
				if (canvas.getContext){
					return canvas.getContext('2d');
				}
				return null;
			}
			
			function draw(ctx,w,h,fact){
					var Entities = new Array();
					for (var i = 0;i < h/fact;i++){
						var tmp = new Clg.Rectangle({
											pos:{
												x:i*30+3*i,
												y:i*fact
											},
											width:30,
											height:h
										});
						tmp.draw(ctx);
						Entities.push(tmp);
					}
					return Entities;
			}
			function clearScreeen(ctx,w,h){
				ctx.clearRect(0,0,w,h);
			}
			function CaligaDemo2(){
				
				var ctx = null;
				var canvas = null;
				if (curNb){
					canvas = document.getElementById('caliga');
					ctx = Init(canvas);
				}
				if (curNb != document.getElementById('fact').value){
					curNb = document.getElementById('fact').value;
					clearScreeen(ctx, canvas.width, canvas.height);
					draw(ctx, canvas.width, canvas.height,curNb);
				}
			}
    </script>
    <style type="text/css">
      canvas { border: 1px solid red; }
    </style>
</head>

<body onload="CaligaDemo2();">
	<h1>Caliga JavaScript Library v0.0.4</h1>
    <h2>Demo n°2</h2>
    <p>Date : 20 Aug 2011</p>
    <a href="../index.html">Back to home</a>
    <br />
    <br />
    <form method="" action="#" onsubmit="CaligaDemo2(curNb);">
        <label for="fact">Insert a number :
        </label>
        <input id="fact" type="text" name="" value="10" />
        <input type="submit" value="Update" />
    </form>
    <br /><br />
	<canvas id="caliga" width="800" height="400">
    	Don't work !!
    </canvas>
</body>
</html>
